<template>
  <div>
    <i-dialog
      :title="'裁剪图片'"
      :visible="visible"
      width="392px"
      :close-on-click-modal="false"
      @close="outerClose"
      @open="outerOpen"
    >
      <div class="cropper-content">
        <div class="cropper-container">
          <vueCropper
            ref="cropper"
            :img="cropperImg"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="true"
            :full="option.full"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            :fixedBox="option.fixedBox"
            :fixed="option.fixed"
            :fixedNumber="option.fixedNumber"
          ></vueCropper>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="outerClose">取 消</el-button>
        <el-button type="primary" @click="finish">裁剪上传</el-button>
      </span>
    </i-dialog>
  </div>
</template>
<script>
export default {
  name: 'CropperDialog',
  data() {
    return {
      option: {
        img: '',
        outputSize: 1, // 剪切后的图片质量（0.1-1）
        full: false, // 输出原图比例截图 props名full
        outputType: 'png',
        canMove: true,
        original: false,
        canMoveBox: true,
        autoCrop: true,
        autoCropWidth: 160,
        autoCropHeight: 160,
        fixedBox: false,
        // fixed: true,
        maxImgSize: 3000, // 图片最大像素
        // fixedNumber: [1, 1],
      },
    }
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    cropperImg: {
      type: String,
      required: true,
    },
    dialogType: {
      type: String,
      default: 'ADD',
    },
    roleAttr: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    refreshTable() {
      this.$emit('refreshTable')
    },
    outerClose() {
      this.$emit('update:visible', false)
    },
    outerOpen() {
      if (this.dialogType === 'ADD') {
        this.form = {}
      } else if (this.dialogType === 'EDIT') {
        this.form = {
          showName: this.roleAttr.showName,
          userType: this.roleAttr.userType,
          explanation: this.roleAttr.explanation,
        }
      }
    },
    finish() {
      this.$refs.cropper.getCropBlob((data) => {
        this.$emit('upload-img', data)
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.cropper-content {
  height: 300px;
  width: 300px;
}
.cropper-container {
  height: 300px;
  width: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .prive-el {
    height: 164px;
    width: 94px;
    flex: 1;
    text-align: center;
    .prive-style {
      margin: 0 auto;
      flex: 1;
      -webkit-flex: 1;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      -webkit-justify-content: center;
      overflow: hidden;
      background: #ededed;
      margin-left: 40px;
    }
    .preview {
      overflow: hidden;
    }
    .el-button {
      margin-top: 20px;
    }
  }
}
</style>
